<template>
  <div>
    <common-search-form ref="searchFormRef"
                        :form-desc="props.formDesc"
                        :form-data="formData"
                        :span="8"
                        @search="handleSearch">
      <template #[name]="scope" v-for="(_,name) of $slots">
        <!-- 定义插槽用于接受其父级组件的插槽内容 -->
        <slot :name="name" :data="scope.formData"></slot>
      </template>
    </common-search-form>
    <slot/>
    <table-bar v-if="!props.tableDesc.isSingleSelect"
               :tableSelectList="tableSelectList"
               :clearSelect="clearSelect"
               :isReserve="isReserve"/>
    <common-table ref="tableRef"
                  :table-desc="props.tableDesc"
                  :loading="tableLoading"
                  :table-data="tableData"
                  @changeSelect="changeSelect"
                  v-bind="$attrs">
      <template #[name]="scope" v-for="name in columns.map(i=>i.prop).filter(Boolean)">
        <slot :name="`${name}-table`" :row="scope.row"></slot>
      </template>
    </common-table>
    <pagination ref="paginationRef" :total="total" v-model:currentPage="page.pageNo" v-model:pageSize="page.pageSize" @change="getTableData" />
  </div>
</template>

<script setup lang="ts">
import {ref, computed, reactive} from "vue"
import {useAutoRequest} from "@/hooks/useAutoRequest";
import CommonSearchForm from "./commonSearchForm.vue";
import CommonTable from "./commonTable.vue"
import Pagination from "./pagination.vue";
import TableBar from "./tableBar.vue";


const props = defineProps({
  formDesc: {
    type: Object,
    required: true,
  },
  tableDesc:{
    type:Object,
    default:()=>({
      columns:[],
    }),
    required:true,
  },
  tableMethod:{
    type:Function,
    default:()=>{},
    required:true,
  },
  otherParams:{
    type:Object,
    default:()=>({}),
  },
})

const {columns} = props.tableDesc

// 搜索表单数据
const formData = ref({})
// 总条数
const total = ref<number>(0)
// 初始分页值
const page = reactive({
  pageNo: 1,
  pageSize: 10,
})
let params = {}
const handleSearch = (searchData:any) => {
  params = searchData.value
  page.pageNo = 1
  clearSelect()
  getTableData()
}
const tableData = ref([])
const [tableLoading, getTableDataAuto] = useAutoRequest(props.tableMethod)
// 获取表格数据
const getTableData = async ()=>{
  tableData.value = await getTableDataAuto({...page,...params,...props.otherParams})
  total.value = 15
}

const tableSelectList = ref([])
const emits = defineEmits(['tableSelect'])
// 是否能够跨页选择
const isReserve = computed(()=>{
  return props.tableDesc.rowKey&&columns.some((i:any)=>i.type === 'selection'&&i.reserveSelection)
})
// 改变表格选择
const changeSelect = (val:any) => {
  tableSelectList.value = val
  emits('tableSelect',val)
}
// 清空表格选择
const clearSelect = () => {
  tableRef.value.clearSelection()
}

const searchFormRef = ref()
const tableRef = ref()
const paginationRef = ref()

//向外暴漏搜索条件
const getSearchData = () => {
  return searchFormRef.value.formData
}
// 刷新表格
const refreshTable = (isInit=true) => {
  if (isInit){
    searchFormRef.value.checkDefault()
  }else {
    getTableData()
  }
}
defineExpose({
  searchFormRef,
  tableRef,
  paginationRef,
  getSearchData,
  refreshTable
})
</script>

<style scoped >

</style>
